<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>现代浏览器博物馆</title>

    <!-- Bootstrap 样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <!-- IE的支持 -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->
    <style type="text/css">
    	body{
    		padding-top: 50px;
    	}
    	.carousel{
    		height: 500px;
    		margin-bottom: 50px;
    	}
    	.carousel .item{
    		height: 500px;
    		background-color: #000000;
    	}
    	.carousel .item img{
    		width: 100%;
    		min-height: 500px;
    	}
    	.carousel-caption p{
    		font-size: 20px;
    		line-height: 1.5;
    	}
    	.carousel-caption a{
    		margin-bottom: 20px;
    	}
    	.tab-content .col-md-7{
    		margin-top: 120px;
    		padding: 0 30px;
    	}
    	.tab-content .row{
    		padding: 20px 0;
    	}
    	.tab-content .col-md-7 h2{
    		font-size: 50px;
    	}
    	.tab-content .col-md-7 h2 small{
    		font-size: 30px;
    	}
    	.tab-content .col-md-7 p{
    		font-size: 20px;
    	}
    	/*响应式：如果是768px以内*/
    	@media screen and (max-width: 768px ) {
    		.carousel{
    			height: 300px;
    			margin-bottom: 10px;
	    	}
	    	.carousel .item{
	    		height: 300px;
	    	}
	    	.carousel .item img{
	    		width: 100%;
	    		min-height: 300px;
	    		}
	    	.tab-content .col-md-7{
	    		margin-top: 20px;
	    	}
	    	.col-md-5>img{
	    		width: 300px;
	    	}
    	}
    </style>
  </head>
  <body>
  	<!--顶部导航条-->
    <div class="navbar navbar-default navbar-inverse navbar-fixed-top">
			<div class="container"> <!--使其居中-->
				<div class="navbar-header"> <!--Logo标题头部-->
					<button class="navbar-toggle collapsed"
						data-toggle = "collapse"
						data-target = "#myNavbar"> <!--塌陷后出现的按钮-->
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="##">现代浏览器博物馆</a> <!--标题-->
				</div>
				<div class="collapse navbar-collapse" id="myNavbar"> <!--塌陷区-->
					<ul class="nav navbar-nav"> <!--实际导航条-->
						<li class="active"><a href="##">综述</a></li>
						<li><a href="##">简述</a></li>
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle = "dropdown" href="##">特点
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu" id="dropdown-list">
								<li><a href="#chrome-tab">Chrome</a></li>
								<li><a href="#firefox-tab">Firefox</a></li>
								<li><a href="#safari-tab">Safari</a></li>
								<li><a href="#opera-tab">Opera</a></li>
								<li><a href="#ie-tab">IE</a></li>
							</ul>
						</li>
						<li><a href="##" data-toggle = "modal" data-target = "#about">关于</a></li>
					</ul>
				</div>
			</div>
    </div>
    <!--轮播图-->
		<div class="carousel slide" id="myCar" data-ride = "carousel">
    	<ol class="carousel-indicators">
    		<li data-slide-to="0" data-target="#myCar" class="active" ></li>
    		<li data-slide-to="1" data-target="#myCar"></li>
    		<li data-slide-to="2" data-target="#myCar"></li>
    		<li data-slide-to="3" data-target="#myCar"></li>
    		<li data-slide-to="4" data-target="#myCar"></li>
    	</ol>
    	<div class="carousel-inner">
    		<div class="item active">
    			<img src="img/chrome-big.jpg"/>
    			<div class="carousel-caption">
    				<h2>Chrome</h2>
    				<p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
    				<a class="btn btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/">点击下载</a>
    			</div>
    		</div>
    		<div class="item">
    			<img src="img/firefox-big.jpg"/>
    			<div class="carousel-caption">
    				<h2>Firefox</h2>
    				<p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
    				<a class="btn btn-primary" href="http://www.firefox.com.cn/download/">点击下载</a>
    			</div>
    		</div>
    		<div class="item">
    			<img src="img/safari-big.jpg"/>
    			<div class="carousel-caption">
    				<h2>Safari</h2>
    				<p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
    				<a class="btn btn-primary" href="http://www.apple.com/cn/safari/">点击下载</a>
    			</div>
    		</div>
    		<div class="item">
    			<img src="img/opera-big.jpg"/>
    			<div class="carousel-caption">
    				<h2>Opera</h2>
    				<p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>
    				<a class="btn btn-primary" href="http://www.opera.com/zh-cn/">点击下载</a>
    			</div>
    		</div>
    		<div class="item">
    			<img src="img/ie-big.jpg"/>
    			<div class="carousel-caption">
    				<h2>IE</h2>
    				<p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>
    				<a class="btn btn-primary" href="http://ie.microsoft.com/">点击下载</a>
    			</div>
    		</div>
    		<a class="carousel-control left" href="#myCar" data-slide = "prev">
    			<span class="glyphicon glyphicon-chevron-left"></span>
    		</a>
    		<a class="carousel-control right" href="#myCar" data-slide = "next">
    			<span class="glyphicon glyphicon-chevron-right"></span>
    		</a>
    	</div>
    </div>
		<!--展示-->
		<div class="container">
			<div class="row text-center">
				<div class="col-md-4">
					<img src="img/chrome-logo-small.jpg"/>
					<h3>Chrome</h3>
					<p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
					<a class="btn btn-default" href="##">官方网站</a>
				</div>
				<div class="col-md-4">
					<img src="img/firefox-logo-small.jpg"/>
					<h3>Firefox</h3>
					<p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
					<a class="btn btn-default" href="##">官方网站</a>
				</div>
				<div class="col-md-4">
					<img src="img/safari-logo-small.jpg"/>
					<h3>Safari</h3>
					<p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
					<a class="btn btn-default" href="##">官方网站</a>
				</div>
			</div>
			<hr style="margin: 50px 0;"/>
			<!--详情介绍-标签页-->
			<ul class="nav nav-tabs" id="tab-list">
				<li class="active"><a href="#chrome-tab" data-toggle="tab">Chrome</a></li>
				<li><a href="#firefox-tab" data-toggle="tab">Firefox</a></li>
				<li><a href="#safari-tab" data-toggle="tab">Safari</a></li>
				<li><a href="#opera-tab" data-toggle="tab">Opera</a></li>
				<li><a href="#ie-tab" data-toggle="tab">IE</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="chrome-tab">
					<div class="row">
						<div class="col-md-7">
							<h2 class="text-primary">Google Chrome <small>使用最广的浏览器</small></h2>
							<p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。 该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
						</div>
						<div class="col-md-5">
							<img src="img/chrome-logo.jpg"/>
						</div>
					</div>
				</div>
				<div class="tab-pane" id="firefox-tab">
					<div class="row">
						<div class="col-md-5">
							<img src="img/firefox-logo.jpg"/>
						</div>
						<div class="col-md-7">
							<h2 class="text-primary">Mozilla Firefox <small>美丽的狐狸</small></h2>
							<p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器， 使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>
						</div>
					</div>
				</div>
				<div class="tab-pane" id="safari-tab">
					<div class="row">
						<div class="col-md-7">
							<h2 class="text-primary">Safari <small>Mac用户首选</small></h2>
							<p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。</p>
						</div>
						<div class="col-md-5">
							<img src="img/safari-logo.jpg"/>
						</div>
					</div>
				</div>
				<div class="tab-pane" id="opera-tab">
					<div class="row">
						<div class="col-md-5">
							<img src="img/opera-logo.jpg"/>
						</div>
						<div class="col-md-7">
							<h2 class="text-primary">Opera <small>小众但易用</small></h2>
							<p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。</p>
						</div>
					</div>
				</div>
				<div class="tab-pane" id="ie-tab">
					<div class="row">
						<div class="col-md-7">
							<h2 class="text-primary">IE <small>你懂的</small></h2>
							<p>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</p>
						</div>
						<div class="col-md-5">
							<img src="img/ie-logo.jpg"/>
						</div>
					</div>
				</div>
				<footer style="margin: 50px 0;">
					<a class="pull-right" href="#top">回到顶部</a>
					<p>© 2017年8月 </p>
				</footer>
			</div> <!--响应式-->
		</div>
		<!--关于——弹出框-->
		<div class="modal fade" id="about">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" type="button" data-dismiss = "modal">&times;</button>
						<h4 class="modal-title">关于</h4>
					</div>
					<div class="modal-body">
						<p>慕课网隶属于北京慕课科技中心(有限合伙)，是一家从事互联网免费教学的网络教育公司。秉承“开拓、创新、公平、分享”的精神， 将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
					</div>
					<div class="modal-footer">
						<a class="btn btn-primary" data-dismiss = "modal">了解</a>
					</div>
				</div>
				
			</div>
		</div>
    <script src="./js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
//  	页面加载完成后
    	$(document).ready(function  () {
    		$("#dropdown-list a").click(function  () {
    			var href = $(this).attr("href"); //获取当前a标签href值
    			$("#tab-list a[href='"+href+"']").tab("show");
    		}); 
    	});
    </script>
  </body>
</html>